<template>
  <div>
    <el-tabs v-if="role==1 || role ==2" v-model="activeName" @tab-click="handleClick" style="padding-left:50px; padding-top: 10px; padding-right: 50px; ">
    <el-tab-pane label="创建服务" v-if="role==2" ><Create ref="Create"></Create></el-tab-pane>
    <el-tab-pane label="分配服务" v-if="role==1" ><Allot ref="Allot"></Allot></el-tab-pane>
    <el-tab-pane label="处理服务" v-if="role==2" ><Dell ref="Dell"></Dell></el-tab-pane>
    <el-tab-pane label="反馈服务" v-if="role==2"><Feedback ref="Feedback"></Feedback></el-tab-pane>
    <el-tab-pane label="查看归档" ><Recode ref="Recode"></Recode></el-tab-pane>
    </el-tabs>
    <p v-else>您没有该权限！</p>
  </div>
</template>

<script>
  import Allot from './allot.vue'
  import Create from './create.vue'
  import Dell from './dell.vue'
  import Feedback from './feedback.vue'
  import Recode from './recode.vue'
  export default {
    name: 'service',
    data() {
      return {
         role:0,
      };
    },
    components: {
      Allot:Allot,
      Create:Create,
      Dell:Dell,
      Feedback:Feedback,
      Recode:Recode,
    },
    mounted() {
      this.role=this.$store.state.userInfo.role;
    },
    beforeDestroy() {

    },
    computed:{

    },
    methods: {
       handleClick(tab, event) {
         if(tab.label=='分配服务')
             this.$refs.Allot.getdata();
          if(tab.label=='创建服务')
             this.$refs.Create.getdata();
             if(tab.label=='处理服务')
             this.$refs.Dell.getdata();
             if(tab.label=='反馈服务')
             this.$refs.Feedback.getdata();
             if(tab.label=='查看归档')
             this.$refs.Recode.getdata();
      }
    },
  };
</script>

<style>

</style>
